<template>
  <div class="test">
    <!-- <a
      href="javascript:;"
      @click="isShow = true"
      >首页</a
    >---
    <a
      href="javascript:;"
      @click="isShow = false"
      >关于</a
    > -->
    <a
      href="javascript:;"
      @click="cName = 'Home'"
      >首页</a
    >---
    <a
      href="javascript:;"
      @click="cName = 'About'"
      >关于</a
    >
    <!-- <home v-if="isShow"></home>
    <about v-else></about> -->
    <!-- 当组件失活的时候，缓存组件的数据
      include 包含

      exclude 不包含

      max 最多缓存多少个

      缓存或者不缓存的组件需要设置组件的名称
    -->
    <keep-alive>
      <component :is="cName"></component>
      <!-- <router-view></router-view> -->
    </keep-alive>

    <!--

      渲染组件的方式
      1. 使用组件的名称作为标签直接渲染
      2. 通过component 设置 is属性渲染指定的组件 组件切换
      3. 通过router-view 渲染路由组件

     -->
  </div>
</template>
<script>
// import Home from './Home.vue'
// import About from './About.vue'
export default {
  data() {
    return {
      isShow: true,
      cName: 'Home'
    }
  },
  components: {
    // eslint-disable-next-line vue/no-unused-components
    // Home,
    // eslint-disable-next-line vue/no-unused-components
    // About
    Home: () => import('./Home.vue'),
    About: () => import('./About.vue')
    // About: (resolve) => require(['./About .vue'], resolve)
  }
}
</script>
<style lang="scss" scoped></style>
